<template>
  <a-modal
    v-model:visible="config.visible"
    :title="title"
    title-align="start"
    @before-ok="handleBeforeOk"
    unmountOnClose
  >
    <a-form :model="form" ref="formRef">
      <a-form-item
        field="name"
        label="名称"
        :rules="[{ required: true, message: '请输入名称' }]"
        :validate-trigger="['input']"
      >
        <a-input v-model="form.name" placeholder="请输入名称" allow-clear />
      </a-form-item>
      <a-form-item
        field="color"
        label="画布颜色"
        :rules="[{ required: true, message: '请选择画布颜色' }]"
        :validate-trigger="['change']"
      >
        <a-select
          allow-clear
          v-model="form.color"
          placeholder="请选择"
          @change="handleChangeColor"
        >
          <a-option
            v-for="item in CANVASCOLORTYPE_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="backgroundColor"
        label="背景颜色"
        :rules="[{ required: true, message: '请选择背景颜色' }]"
        :validate-trigger="['change']"
      >
        <a-select
          placeholder="请选择"
          v-model="form.backgroundColor"
          allow-clear
        >
          <a-option
            v-for="item in config.bgColorList"
            :key="item.color"
            :label="item.label"
            :value="item.color"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="overlapRule"
        label="叠加方式"
        :rules="[{ required: true, message: '请选择叠加方式' }]"
        :validate-trigger="['change']"
      >
        <a-select placeholder="请选择" v-model="form.overlapRule" allow-clear>
          <a-option
            v-for="item in OVERLAPRULETYPE_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="sizeType"
        label="画布尺寸"
        :rules="[{ required: true, message: '请选择画布尺寸' }]"
        :validate-trigger="['change']"
      >
        <a-cascader
          path-mode
          :options="config.sizeList"
          placeholder="请选择"
          allow-clear
          allow-search
          v-model="form.sizeType"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { getCanvasSizeTree, checkGraphForm, editGraphForm, graphInfo } from '@/api/graph.js'
import { getGraphColorList, serializeRequestForm } from '@/utils/index.js'
import { Message } from '@arco-design/web-vue'
import { reactive, computed, ref } from 'vue'
import { getDictListForKey } from '@/utils/dict.js'
const OVERLAPRULETYPE_LIST = getDictListForKey('OVERLAPRULETYPE')
const CANVASCOLORTYPE_LIST = getDictListForKey('CANVASCOLORTYPE')
const formRef = ref()
const form = reactive({
  name: null,
  color: null,
  backgroundColor: null,
  overlapRule: null,
  sizeType: []
})
const config = reactive({
  visible: false,
  modalType: 'add',
  bgColorList: [],
  sizeList: []
})
const title = computed(() => {
  return config.modalType === 'add' ? '新增' : '编辑'
})
const handleChangeColor = (color) => {
  form.backgroundColor = null
  if (color) {
    config.bgColorList = getGraphColorList(color)
  }
}
const getCanvasSizeTreeList = async () => {
  const res = await getCanvasSizeTree()
  config.sizeList = res.data
}
const handleBeforeOk = async () => {
  const errors = await formRef.value.validate()
  if (errors) {
    return false
  }
  console.log(form.sizeType)
  const params = { ...form }
  params.sizeType = form.sizeType[0]
  params.size = form.sizeType[1]
  const res = await checkGraphForm(serializeRequestForm(params))
  if (res.data !== 'SUCCESS') {
    Message.error(res.data)
    return false
  } else {
    await editGraphForm(serializeRequestForm(params), config.modalType === 'add' ? 'add' : 'edit')
    Message.success('保存成功')
    emits('on-success')
  }
}
const resetForm = () => {
  form.id = null
  form.name = null
  form.color = null
  form.backgroundColor = null
  form.overlapRule = null
  form.sizeType = []
}
const emits = defineEmits(['on-success'])
const init = async (type, data) => {
  config.modalType = type
  resetForm()
  if (type === 'edit') {
    const { id } = data
    const res = await graphInfo(id)
    form.id = res.data.id
    form.name = res.data.name
    form.color = res.data.color
    form.backgroundColor = res.data.backgroundColor
    form.overlapRule = res.data.overlapRule
    form.sizeType = [res.data.sizeType, res.data.size]
    config.bgColorList = getGraphColorList(form.color)
  }
  config.visible = true
  await getCanvasSizeTreeList()
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped></style>
